<template>
  <div>
    <a-table
      :class="'my-index-table tytable1'"
      ref="table1"
      size="small"
      rowKey="id"
      bordered
      :columns="columns"
      :dataSource="dataSource1"
      :pagination="false"
      :scroll="{ x: 2050}"
    >
      <template slot="ellipsisText" slot-scope="text">
        <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
      </template>

      <template slot="dayWarnning" slot-scope="text, record">
        <a-icon type="bulb" theme="twoTone" style="font-size: 22px" :twoToneColor="getTipColor(record)" />
      </template>
    </a-table>
  </div>
</template>
<script>
import DictListVue from '../../system/DictList.vue'
export default {
  data() {
    return {
      columns: [
        {
          title: '1号变压器',
          align: 'left',
          children: [
            {
              width: 100,
              dataIndex: 'yjje',
              title: (
                <div class="headerDiv">
                  <div class="name">名称</div>
                  <div class="date">日期</div>
                </div>
              ),
            },
            {
              title: '1号变压器总表1-1AA1号变压器总表1-1AA',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width: 50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '制冷机房压缩机设备JF-AP1',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width: 50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '1号变配电间备AL-BP',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width: 50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '备用',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width: 50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: 'AL-JF制冷机房照明',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width: 50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '立体库照明(仓)LK-AL',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width: 50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '备用',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width: 50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '综合车间一二区照明(屠、调)TZ-',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width: 50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '备用',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width: 50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '污水处理(污)',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width: 50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '真空间，鲜品库暂存间(屠，仓)',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width: 50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '净膛间、分割腿剔骨线(屠)AP-',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width: 50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '雨水收集池',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width: 50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '副产品加工车间(屠)',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width: 50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '备用',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width: 50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '冻前内包(屠.调)XZAP2',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width: 50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '副产品包装(屠)XZAP1',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width: 50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '制冷机房事故风机AP-KY',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width: 50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '屠宰空压机AP-KY',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width: 50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '备用',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width: 50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '制冷机房蒸发室冷凝器',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width: 50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '合计',
              align: 'center',
              children: [
                {
                  title: '用量',
                  width: 50,
                  dataIndex: 'water',
                },
              ],
            },
          ],
        },

        // {
        //   title: '操作',
        //   dataIndex: 'action',
        //   align: 'center',
        //   scopedSlots: { customRender: 'action' },
        // },
      ],
      dataSource1: [
        {
          id: 1,
          yjje: '2021-08-08',
          water: '0',
        },
      ],
    }
  },
  mounted() {
    setTimeout(() => {
      let width = document.getElementsByClassName('ant-table-row-cell-break-word')[0].offsetWidth
      let height = document.getElementsByClassName('ant-table-row-cell-break-word')[0].offsetHeight
      var sinOfAngleX = height / width // 0.5
      let deg = (Math.atan(sinOfAngleX) * 180) / Math.PI
      document.getElementsByClassName('headerDiv')[0].style.width = width-16+"px"
      document.getElementsByClassName('headerDiv')[0].style.height = height-16+"px"
      document.getElementsByClassName('ant-table-row-cell-break-word')[0].style.background =
        'linear-gradient(' + deg.toFixed(0) + 'deg, transparent 49.5%, #ddd 49.5%, #ddd 50.5%, transparent 50.5%)'
    }, 200)
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-table-small > .ant-table-content > .ant-table-body{
  margin:0;
}
.headerDiv {
  position: relative;
  .name{
    position: absolute;
    right:0;
    top:0;
  }
  .date{
    position: absolute;
    left:0;
    bottom:0;
  }
}
</style>
